<template>
    <div class="filters">
        <el-row
            type="flex"
            class="filters-top"
            justify="space-between"
            align="middle"
        >
            <el-col :span="8"> 单程： 广州 - 上海 / 2019-06-17 </el-col>

            <el-col :span="4">
                <el-select
                    size="mini"
                    v-model="airport"
                    placeholder="起飞机场"
                    @change="runFilters"
                >
                    <el-option
                        v-for="(airport, index) in data.options.airport"
                        :key="index"
                        :value="airport"
                        :label="airport"
                    >
                    </el-option>
                </el-select>
            </el-col>

            <el-col :span="4">
                <el-select
                    size="mini"
                    v-model="flightTimes"
                    placeholder="起飞时间"
                    @change="runFilters"
                >
                    <!-- <el-option label="00:00 - 06:00" value="1"> </el-option> -->
                    <el-option
                        v-for="(time, index) in data.options.flightTimes"
                        :key="index"
                        :label="time.from + ':00' + ' - ' + time.to + ':00'"
                        :value="time.from + ',' + time.to"
                    >
                    </el-option>
                </el-select>
            </el-col>

            <el-col :span="4">
                <el-select
                    size="mini"
                    v-model="company"
                    placeholder="航空公司"
                    @change="runFilters"
                >
                    <el-option
                        v-for="(company, index) in data.options.company"
                        :key="index"
                        :label="company"
                        :value="company"
                    >
                    </el-option>
                </el-select>
            </el-col>

            <el-col :span="4">
                <el-select
                    size="mini"
                    v-model="airSize"
                    placeholder="机型"
                    @change="runFilters"
                >
                    <el-option
                        v-for="(size, index) in sizeTable"
                        :key="index"
                        :label="size.label"
                        :value="size.value"
                    >
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <div class="filter-cancel">
            筛选：
            <el-button
                type="primary"
                round
                plain
                size="mini"
                @click="handleFiltersCancel"
            >
                撤销
            </el-button>
        </div>
    </div>
</template>

<script>
    export default {
        props: ["data"],
        data() {
            return {
                airport: "",
                flightTimes: "",
                company: "",
                airSize: "",

                rules: {
                    // 纯函数, 不依赖当前环境
                    // 不对当前数据造成副作用
                    // 相同的输入, 每次都能够得到相同的输出
                    airport: (flights, userOption) => {
                        return flights.filter((item) => {
                            return item.org_airport_name == userOption;
                        });
                    },
                    flightTimes: (flights, userOption) => {
                        const from = Number(userOption.split(",")[0]);
                        const to = Number(userOption.split(",")[1]);

                        return flights.filter((item) => {
                            const depTime = Number(item.dep_time.split(":")[0]);
                            return depTime >= from && depTime < to;
                        });
                    },
                    company: (flights, userOption) => {
                        return flights.filter((item) => {
                            return item.airline_name == userOption;
                        });
                    },
                    airSize: (flights, userOption) => {
                        return flights.filter((item) => {
                            return item.plane_size == userOption;
                        });
                    },
                },
                sizeTable: [
                    {
                        label: "大",
                        value: "L",
                    },
                    {
                        label: "中",
                        value: "M",
                    },
                    {
                        label: "小",
                        value: "S",
                    },
                ],
            };
        },
        methods: {
            runFilters() {
                let flights = [...this.data.flights];

                // 遍历规则配置, 配置中的每个 key 都可以拿出来
                for (const key in this.rules) {
                    //   拿到用户选择
                    // 如果当前 key == this.airport
                    // this[key] == this.airport
                    const userOption = this[key];
                    //   拿到对应选择的处理函数
                    const filterFn = this.rules[key];
                    
                    // 如果用户有选择, 就执行这个函数, 否则不执行
                    if (userOption) {
                        flights = filterFn(flights, userOption)
                    }
                }
                // console.log(flights);
                // 先将原来的一百条数据放入一个数组备用
                // if (this.airport) {
                //     flights = this.handleAirport(flights);
                //     console.log(flights);
                // }

                // if (this.flightTimes) {
                //     flights = this.handleFlightTimes(flights);
                //     console.log(flights);
                // }

                // if (this.company) {
                //     flights = this.handleCompany(flights);
                //     console.log(flights);
                // }

                // if (this.airSize) {
                //     flights = this.handleAirSize(flights);
                //     console.log(flights);
                // }

                this.$emit("setFilteredList", flights);
            },
            handleFiltersCancel() {
                // 1. 清空所有筛选的选项
                this.airport = "";
                this.flightTimes = "";
                this.company = "";
                this.airSize = "";
                // 2. 执行一下筛选过滤
                this.runFilters();
            },
        },
    };
</script>

<style>
</style>